
/*轮播组件，页面自动铺满外层组件
* isAutomatic:默认false，true时自动轮播，否则手动轮播，显示左右按钮
* showCount：主窗口显示的子页面的数量
* isShowPrev:是否显示左右两个按钮
* heightAuto:不传值的话加载完成后取子元素高度作为父元素高度，传入百分比的话高度随宽度大小变化
* */
'use strict';
var React = require('react');
class ReSlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active:0
        };
        this.renderSliders=this.renderSliders.bind(this);
        this.isShowPrev=this.isShowPrev.bind(this);
        this.isShowNext=this.isShowNext.bind(this);
        this.changePage=this.changePage.bind(this);
        this.moveLeft=this.moveLeft.bind(this);
        this.moveRight=this.moveRight.bind(this);
    }

    //渲染主体部分
    renderSliders(){
        var count=this.props.showCount!=undefined?this.props.showCount:1;
       /* var count=this.props.showCount;*/
        count=parseInt(count);
        //动态样式
        var styles={
            width:100/count+'%'
        };
        return this.props.children.map((child,i)=>{
            return <div style={styles} key={"ReSlider_Item"+i} className="ReSlider_Item" >{child}</div>
        });
    }


    //获取css属性值
    GetCurrentStyle (obj, prop) {
    if (obj.currentStyle) {
        return obj.currentStyle[prop];
    }
    else if (window.getComputedStyle) {
        prop = prop.replace (/([A-Z])/g, "-$1");
        prop = prop.toLowerCase ();
        return document.defaultView.getComputedStyle (obj,null)[prop];
    }
    return null;
}
    //下一页按钮样式
    isShowNext(){
        if(this.props.isShowPrevAndNext){
            return 'ReSlider_Next';
        }

        if(this.props.isAutomatic){
            return 'ReSlider_HideButton';
        }
        else{
            return 'ReSlider_Next';
        }
    }

    //上下页按钮样式
    isShowPrev(){

        if(this.props.isShowPrevAndNext){
            return 'ReSlider_Prev';
        }

        if(this.props.isAutomatic){
            return 'ReSlider_HideButton';
        }
        else{
            return 'ReSlider_Prev';
        }
    }

    changePage(type){
        var itemCount = this.props.children.length;
        if(type==1) {
            if (this.state.active>0) {
                this.moveRight();
            }
        }
        else{
            if(this.state.active<itemCount-this.props.showCount) {
                this.moveLeft();
            }
        }
    }

    //向左滑动
    moveLeft(){
        var count=this.props.showCount!=undefined?this.props.showCount:1;
        var sliders = this.refs.ReSlider_Sliders;
        //单个item宽度,此处溢出部分的子元素依旧显示
        var singleWidth = sliders.offsetWidth/count;
        sliders.style.left = -1*(this.state.active+1)* singleWidth + 'px';
        var activeNum=this.state.active+1;
        this.setState({
            active:activeNum
        });
    }

    //向右滑动
    moveRight(){
        var count=this.props.showCount!=undefined?this.props.showCount:1;
        var sliders = this.refs.ReSlider_Sliders;
        //单个item宽度
        var singleWidth = sliders.offsetWidth/count;
        sliders.style.left = -1*(this.state.active-1)* singleWidth + 'px';
        var activeNum=this.state.active-1;
        this.setState({
            active:activeNum
        });
    }


    //渲染完成之后通过定时器轮播页面
    componentDidMount(){

        var sliders = this.refs.ReSlider_Sliders;
        var container=this.refs.ReSlider_Container;
        if(this.props.heightAuto) {
            container.style.paddingTop=this.props.heightAuto;
        }
        else{
            container.style.height = sliders.offsetHeight + "px";
        }
        if(this.props.isAutomatic) {
            var itemCount = this.props.children.length;
            //单个item宽度
            var singleWidth = sliders.offsetWidth;
            var reactVisualDom=this;
            //标识运动状态，运动到底部之后反向运动
            var moveType = 0;
            setInterval(function () {
                if (reactVisualDom.state.active==0) {
                    moveType = 0;
                }
                if (reactVisualDom.state.active==itemCount-reactVisualDom.props.showCount) {
                    moveType = 1;
                }
                reactVisualDom.changePage(moveType);
               /* if (moveType == 0) {
                    reactVisualDom.moveLeft();
                }
                else {
                    reactVisualDom.moveRight();
                }*/
            }, 4000);
        }
    }

    render() {
        return(
            <div ref="ReSlider_Container"  className="ReSlider_Container">
                <div className={this.isShowPrev()}><img className="ReSlider_Move" src="/images/pc/content_left_arrow_normal.png" onClick={this.changePage.bind(this,1)}/></div>
                <div className={this.isShowNext()}><img className="ReSlider_Move" src="/images/pc/content_right_arrow_normal.png" onClick={this.changePage.bind(this,0)}/></div>
                <div ref="ReSlider_Sliders" className="ReSlider_Sliders">
                    {this.renderSliders()}
                </div>
            </div>
        );
    }
}

ReSlider.propTypes = {
    isAutomatic: React.PropTypes.bool,
    showCount: React.PropTypes.number,
    isShowPrevAndNext:React.PropTypes.bool,
    heightAuto:React.PropTypes.string
};

module.exports=ReSlider;